<template>
  <Table
    ref="tableRef"
    :columns="data.columns"
    :toolbar="data.toolbar"
    :query="data.query"
    :othercontent="true"
    @get-list="getData"
  >
    <template #othercontent>
      <div class="card">
        <div class="icon-top"></div>
        <div class="card-content com-head-wrap1">
          <div class="card-data">
            <div class="card-item">
              <div class="iconfont icon-power"></div>
              <div class="right">
                <div class="title">电量（度）</div>
                <div class="title">
                  {{
                    String(data.detailData?.totalPower)
                      ? formatNumberDigit(data.detailData.totalPower, 4)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="iconfont icon-charging-time"></div>
              <div class="right">
                <div class="title">充电时长（小时）</div>
                <div class="title">
                  {{
                    String(data.detailData?.chargedTime)
                      ? formatNumberDigit(data.detailData.chargedTime, 0)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="iconfont icon-count"></div>
              <div class="right">
                <div class="title">充电次数（次）</div>
                <div class="title">
                  {{
                    String(data.detailData?.count)
                      ? formatNumberDigit(data.detailData.count, 0)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="iconfont icon-amount"></div>
              <div class="right">
                <div class="title">订单总金额（元）</div>
                <div class="title">
                  {{
                    String(data.detailData?.totalAmount)
                      ? formatNumberDigit(data.detailData.totalAmount, 2)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="iconfont icon-recharge"></div>
              <div class="right">
                <div class="title">用户实付（元）</div>
                <div class="title">
                  {{
                    String(data.detailData?.actualAmount)
                      ? formatNumberDigit(data.detailData.actualAmount, 2)
                      : '--'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="icon-bottom"></div>
      </div>
    </template>
  </Table>
</template>

<script lang="ts" setup name="powerStationStatisticsList">
import Table from '@/components/table/index.vue';
import moment from 'moment';
import { queryDicByParent } from '@/service/apis/api';
import {
  pagingStationTotalInfo,
  getStationTotalInfo,
  EXPORT_STATIONTOTALINFO,
} from '@/service/apis/statistical';
import { formatNumberDigit, exportFile } from '@/utils/utils';
import { queryAllStation } from '@/service/apis/pile';

const router = useRouter();

const tableRef = ref();

const data = reactive({
  detailData: {} as any,
  startTime: '',
  endTime: '',
  columns: [
    {
      prop: 'stationName',
      label: '电站名称',
      width: 160,
      clickFun: (row: any) => {
        if (row.stationId) {
          router.push({
            name: 'terminalStatisticsList',
            query: {
              id: row.stationId,
              stationName: row.stationName,
              startTime: data.startTime,
              endTime: data.endTime,
            },
          });
        }
      },
    },
    {
      prop: 'operatorName',
      label: '归属运营商',
      width: 160,
    },
    {
      prop: 'channelName',
      label: '平台运营商',
      width: 160,
    },
    {
      prop: 'totalPower',
      label: '电量（度）',
      dataNum: 4,
      width: 120,
    },
    {
      prop: 'chargedTime',
      label: '充电时长（小时）',
      // dataNum: 4,
      width: 140,
    },
    {
      prop: 'count',
      label: '充电次数（次）',
      dataType: String,
      width: 120,
    },
    {
      prop: 'totalElecMoney',
      label: '电费（元）',
      width: 120,
      dataNum: 4,
      askContent: '电费单价*电量，计算所得订单电费',
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费（元）',
      width: 120,
      dataNum: 4,
      askContent: '服务费单价*电量，计算所得订单服务费',
    },
    {
      prop: 'totalAmount',
      label: '订单总金额（元）',
      width: 150,
      dataNum: 4,
      askContent: '电费+服务费',
    },
    {
      prop: 'actualAmount',
      label: '用户实付（元）',
      width: 140,
      dataNum: 2,
      askContent: '单笔订单用户实际支付金额，即订单总金额-平台所有优惠',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'powerStationStatisticsList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_STATIONTOTALINFO,
          '电站统计',
          tableRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '统计时间',
      prop: 'data',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '电站名称',
      prop: 'stationNames',
      comName: 'select',
      props: {
        placeholder: '请选择电站名称',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
        multiple: true,
        filterable: true,
        'collapse-tags': true,
        'collapse-tags-tooltip': true,
      },
    },
    {
      label: '归属运营商',
      prop: 'operatorName',
      comName: 'input',
      props: {
        placeholder: '请输入归属运营商',
      },
    },
  ],
});

const startDate = moment().startOf('months').format('YYYY-MM-DD');
const endDate = moment().format('YYYY-MM-DD');
console.log(startDate, endDate);

// 获取流水记录
const getData = (page: any, search: any) => {
  nextTick(() => {
    let form: any = search.ruleForm;
    if (!form.data) {
      form.data = [startDate, endDate];
    }
    if (form.data && form.data.length > 0) {
      form.startTime = form.data[0];
      form.endTime = form.data[1];
      data.startTime = form.data[0];
      data.endTime = form.data[1];
    } else {
      form.startTime = '';
      form.endTime = '';
      data.startTime = '';
      data.endTime = '';
    }
    console.log(data.startTime, data.endTime);

    getStationTotalInfo(form).then((res: any) => {
      if (res) {
        data.detailData = res;
      } else {
        data.detailData = {};
      }
    });
    form.stationGroup = 1;
    pagingStationTotalInfo(form, page).then((res: any) => {
      if (res) {
        if (
          page.pageNo !== 1 &&
          (!res.dataList || res.dataList?.length === 0)
        ) {
          page.pageNo--;
          getData(page, search);
          return;
        }
        nextTick(() => {
          tableRef.value.setTable({
            total: res.totalCount,
            table: res.dataList,
          });
        });
      }
    });
  });
};

queryAllStation({}).then((res: any) => {
  if (res) {
    nextTick(() => {
      data.query[1].props.options = [...res];
    });
  }
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
.card {
  padding: 30px 0;
  margin: 20px 0;
  .card-content {
    width: 100%;
    .card-data {
      .card-item {
        display: flex;
        text-align: left;
        .title {
          margin-left: 12px;
        }
        .iconfont {
          font-size: 56px;
        }
      }
    }
  }
}
</style>